<template>
    <view class="container">
        <view class="box">
            <image
                :src="shareUrl"
                class="image"
            ></image>
            <!--  #ifdef  APP-PLUS -->
            <view class="bottom">
                <view class="btn-save" @click="saveImage()">保存图片</view>
            </view>
            <!--  #endif -->
        </view>
    </view>
</template>

<script>
    import { getShareInfo } from "@/config/api"
    export default {
        name: "index",
        data() {
          return {
              shareUrl: null
          }
        },
        async onLoad() {
            const res = await getShareInfo()
            this.shareUrl = res.imageLink
        },
        computed: {
            userId() {
                return this.$store.getters.userId
            }
        },
        methods: {
            saveImage() {
                const than = this
                uni.downloadFile({ //下载文件资源到本地,返回文件的本地临时路径
                    url: this.shareUrl, //网络图片路径
                    success: (res)=>{
                        const imageUrl=res.tempFilePath;//临时文件路径
                        uni.saveImageToPhotosAlbum({ //保存图片到系统相册
                            filePath: imageUrl,
                            success: (res) => {
                                than.$u.toast("图片保存成功")
                            },
                            fail: (err) => {
                                than.$u.toast("图片保存失败")
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        padding: 0;
        margin: 0;
        font-size: 0;
        box-sizing: border-box;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        .box {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            height: 100%;
        }
        .image {
            flex: auto;
            display: block;
            width: 100%;
            height: 100%;
        }
        .bottom {
            padding: 18rpx 30rpx;
            background: #000000;
            border-radius: 2rpx;
            .btn-save {
                height: 84rpx;
                background: linear-gradient(140deg, #EFD5B7 0%, #FFD9B8 100%);
                border-radius: 45rpx;
                font-size: 32rpx;
                font-family: PingFang-SC-Bold, PingFang-SC;
                font-weight: bold;
                color: #000000;
                text-align: center;
                line-height: 84rpx;
            }
        }
    }
</style>
